  <template>
<div>
  <!--<div class="crumbs">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item><i class="el-icon-setting"></i> 系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{$route.meta.displayName}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>-->
  <el-row :gutter="10" type="flex" class="row-bg" justify="space-between">
    <el-col :span="14">
      <template>
              <el-select v-model="graphSelectModel"   @change = "queryData" ref="graphSelectModel"  placeholder="图形分类 ">
                <el-option
                  v-for="item in graphClassify"
                  :label="item.label"
                  :value="item.value"
                  :key="item.id">
                </el-option>
              </el-select>
      </template>
            <el-button-group>
              <el-button type="primary" icon="plus" @click="addClick()"></el-button>
            </el-button-group>
          </el-col>
          <el-col :span="10" >
            <el-input v-model="input" placeholder="请输入关键字" style="float:right;width:300px" size='small' icon="search" @change="inputChangeAction"></el-input>
          </el-col>
      </el-row>

      <el-table :data="tableData" height='600' style="width: 100%" @row-dblclick="editClick">
        <el-table-column label="图形集编号" prop="grsNo">
        </el-table-column>
        <el-table-column label="图形集名称" prop="grsName">
        </el-table-column>
        <el-table-column label="备注" prop="remark">
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template scope="scope">
<el-button-group>
  <el-button @click.native.prevent="editClick(tableData[scope.$index])" icon="edit" type="primary" size="small">
  </el-button>
  <el-button @click="deleteClick(scope.$index,tableData)" icon="delete" type="primary" size="small"></el-button>
</el-button-group>
</template>
        </el-table-column>
      </el-table>
      <designPanel :parentDesignerData='desigerData' @graphsSave='queryData'></designPanel>
    </div>
</template>

<script>
import api from 'api/graph.js'
import designPanel from './designPanel.vue'
import ResTypeEnum from 'common/resTypeEnum'

export default {
  components: {
    designPanel
  },
  data: function() {
    return {
      graphClassify: [], //数据类别
      graphSelectModel: '',
      tableData: [],
      desigerData: {
        grsName: '',
        grsNo: '',
        remark: ''
      },
      input: ''

    };
  },
  methods: {
    addClick() {
      this.desigerData = {};
      this.openDesigner();
    },
    editClick(row) {
      this.desigerData = row;
      this.openDesigner();
    },
    deleteClick(index, row) {
      this.$confirm('是否删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.deleteGraphs(row[index]["id"]).then((response) => {
          this.queryData();
        }).catch((err) =>{
            console.error(err);
        });
      });
    },
    queryData() {
      api.listGraphs(this.graphSelectModel).then((response) => {
        var data = response.data;
        this.tableData = data;
      }).catch((err) =>{
          console.error(err);
      });
    },
    openDesigner() {
      $(".rightLayout").show().animate({
        left: "20%"
      }).addClass("showBlock").bind('click', function(e) {
        if (e.stopPropagation) {
          e.stopPropagation();
        } else {
          e.cancelBubble = true;
        }
      });
      //右侧顶部固定
      $(".layoutTop").show().animate({
        left: "20%"
      });
      //隐藏主滚动条，禁止出现双滚，点击其他位置隐藏界面
      $("body").addClass("hideScoll");
    },
    inputChangeAction() {
      var filterData = [];
      var self = this;
      if (this.input == '') {
        this.queryData();
      } else {
        this.tableData = this.tableData.filter(function(v) {
          //遍历行值，如果存在返回该行
          var result = false;
          for (var col in v) {
            if (("" + v[col] + "").indexOf(self.input) >= 0) {
              result = true;
            }
          }
          return result;
        });
      }
    }
  },
  mounted: function() {
    this.queryData();
    this.graphClassify = ResTypeEnum.getAllGrapshClassify();
    this.graphSelectModel = this.graphClassify[0].value;
  }
}
</script>


<style>

</style>
